<template>
    <div>
        <el-table :data="devices" style="width: 100%; height: 100%; font-size: 14px">
            <el-table-column label="设备类型" align="center">
                <template #default="scope">
                    <dict-tag :options="sys_device_type" :value="scope.row.deviceType" />
                </template>
            </el-table-column>
            <el-table-column label="主机" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
            <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
            <el-table-column label="操作系统" align="center" prop="os" :show-overflow-tooltip="true" />
            <el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" />
            <el-table-column label="登录时间" align="center" prop="loginTime" width="180">
                <template #default="scope">
                    <span>{{ proxy.parseTime(scope.row.loginTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-tooltip content="删除" placement="top">
                        <el-button link type="primary" :icon="Delete" @click="handldDelOnline(scope.row)"> </el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup name="Online" lang="ts">
import { systemUserService } from '@great/services';
import DictTag from '@/pages/system/user/components/DictTag.vue';
import { Delete } from '@element-plus/icons-vue';

const { proxy } = getCurrentInstance() as any;
const { sys_device_type } = toRefs<any>(proxy?.useDict('sys_device_type'));

const devices = ref([]);

/** 删除按钮操作 */
const handldDelOnline = (row: any) => {
    ElMessageBox.confirm('删除设备后，在该设备登录需要重新进行验证')
        .then(() => {
            return systemUserService.delOnline(row.tokenId);
        })
        .then((res: any) => {
            if (res.code === 200) {
                proxy?.$modal.msgSuccess('删除成功');
                init();
            } else {
                proxy?.$modal.msgError(res.msg);
            }
        })
        .catch(() => {});
};
const getOnlines = async () => {
    const res: any = await systemUserService.getOnline();
    devices.value = res.rows;
};
const init = () => {
    getOnlines();
};
init();
</script>
